<template>


  <div id="propertyAssessList" v-cloak>

    <!--工具条-->
    <div name="searchColums" id="searchColums">
      <el-form :inline="true" :model="filters" size="small" ref="filters" class="searchForm">
        <el-form-item class="el-form-item" label="姓名">
          <el-input v-model="filters.realname" name="realname" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item class="el-form-item" label="小区名称">
          <el-input v-model="filters.community_name" name="community_name" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>

        <span class="bth_search">
					<el-form-item>
			    		<el-button type="success" icon="el-icon-search" v-on:click="getpropertyAssess(true)">查询</el-button>
			    	</el-form-item>
			    	<el-form-item>
			    		<el-button icon="el-icon-refresh" @click="resetForm('filters')">重置</el-button>
			    	</el-form-item>
				</span>
      </el-form>
    </div>


    <!--列表-->
    <el-table :data="propertyAssess" id="datagrid" empty-text=" " border stripe size="mini"
              :header-row-class-name="headStyle" highlight-current-row v-loading="listLoading"
              :row-class-name="tableRowClassName" @sort-change="handleSortChange" @selection-change="selsChange"
              style="min-width: 100%;">
      <el-table-column prop="index" :formatter="index_formatter" label="序号" width="55px;"></el-table-column>
      <el-table-column prop="community_name" label="小区名称" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column prop="realname" label="姓名" width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="duty" label="职责"  show-overflow-tooltip></el-table-column>
      <el-table-column prop="pls" label="评论数" width="150" show-overflow-tooltip>
      	<template slot-scope="scope">
          <a style="color: blue;cursor:pointer" @click="SearchDetail('py', scope.row)">{{scope.row.pls}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="dzs" label="点赞数" width="150" show-overflow-tooltip>
      	<template slot-scope="scope">
          <a style="color: blue;cursor:pointer" @click="SearchDetail('dz', scope.row)">{{scope.row.dzs}}</a>
        </template>
      </el-table-column>

    </el-table>

    <!--详情界面-->
    <el-dialog title="详情" width="60%" :visible.sync="getDetailVisible" :close-on-click-modal="false">
      <el-table :data="detailDataGrid" id="detailDataGrid" empty-text=" " height="250" border stripe size="mini"
                :header-row-class-name="headStyle" highlight-current-row v-loading="listDetailLoading"
                :row-class-name="tableRowClassName" @sort-change="handleSortChangeDetail" style="width: 100%;">
        <el-table-column prop="index" :formatter="index_formatter" label="序号" width="60"></el-table-column>
        <el-table-column prop="assessUserName" label="评论人" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="houseName" label="评论人地址" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="comment"  v-if="pyVisible" label="评论内容"  show-overflow-tooltip></el-table-column>
        <el-table-column prop="isPraise" v-if="dzVisible" label="点赞情况" width="130"  show-overflow-tooltip></el-table-column>
        <el-table-column prop="assessDate" label="评论时间" show-overflow-tooltip></el-table-column>
      </el-table>
      <!--工具条-->
      <el-col :span="24" class="toolbar" id="pageDivDetail">
        <el-pagination small background @current-change="handleCurrentChangeDetail"
                       @size-change="handleSizeChangeDetail" :page-sizes="[10, 20, 50, 100]"
                       :page-size="detailpageSize" :total="detailtotal" layout="total,sizes, prev, pager, next"
                       style="float:right;"></el-pagination>
      </el-col>
    </el-dialog>
    <!--工具条-->
    <el-col :span="24" class="toolbar" id="pageDiv">
      <el-pagination small background @current-change="handleCurrentChange" @size-change="handleSizeChange"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="pageSize" :total="total" layout="total,sizes, prev, pager, next"
                     style="float:right;"></el-pagination>
    </el-col>

  </div>
</template>
<script>
  import {getToken, setToken, removeToken} from '@/util/auth'
  import request from '@/router/axios'


  export default {
    name: 'table_property_assess',
    components: {},
    data() {
      return {
        filters: {
          realname: '',
          community_name:''
        },
        url: {
          list: '/admin/propertyAssess/page',
          detailList: '/admin/propertyAssess/detailPage'
        },
        propertyAssess: [],
        detailDataGrid: [],
        total: 0,
        page: 1,
        pageSize: 10,
        detailtotal: 0,
        detailpage: 1,
        detailpageSize: 10,
        listLoading: false,
        pyVisible:false,
        dzVisible:false,
        listDetailLoading: false,

        sels: [], // 列表选中列
        sort: {
          sort: 'id',
          order: 'asc'
        },
        detailsort: {
          sort: 'id',
          order: 'asc'
        },

        getDetailVisible: false, // 详情界面是否显示
        propertyId: '',
        assessType:'',
        communityId:''

      }
    },
    methods: {
      handleSortChange(sort) {
        this.sort = {
          sort: sort.prop,
          order: sort.order == 'ascending' ? 'asc' : 'desc'
        }
        this.getpropertyAssess()
      },
      handleSortChangeDetail(sort) {
        this.detailsort = {
          sort: sort.prop,
          order: sort.order == 'ascending' ? 'asc' : 'desc'
        }
        this.getDetailAssessData()
      },
      tableRowClassName(row, index) {
        // 把每一行的索引放进row
        row.index = row.rowIndex
      },
      headStyle({row, rowIndex}) {
        return 'table_head_style'
      },
      index_formatter: function (row, column, cellValue, index) {
        // 放回索引值
        return (this.pageSize * (this.page - 1) + 1 + index)
      },
      handleCurrentChange(val) {
        this.page = val
        this.getpropertyAssess()
      },
      handleCurrentChangeDetail(val) {
        this.detailpage = val
        this.getDetailAssessData()
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.page = 1
        this.getpropertyAssess()
      },
      handleSizeChangeDetail(val) {
        this.detailpageSize = val
        this.detailpage = 1
        this.getDetailAssessData()
      },
      resetForm(formName) {
        this.filters = {
          realname: '',
          community_name:''
        }
      },
      // 显示详情列表框
      SearchDetail(type, row) {
        this.getDetailVisible = true
        this.propertyId = row.userId
        this.assessType = type
        this.communityId = row.community_id
        if(type=="dz"){
        	this.dzVisible = true;
        	this.pyVisible=false;
        }else{
        	this.pyVisible=true;
        	this.dzVisible = false;
        }
        this.getDetailAssessData()
      },
      // 获取用户评价详情列表
      getDetailAssessData() {
        const para = {
          params: {
            page: this.detailpage,
            limit: this.detailpageSize,
            propertyId: this.propertyId,
            assessType:this.assessType,
            communityId:this.communityId
          }
        }
        this.listDetailLoading = true
        this.$http.get(this.url.detailList, para).then((res) => {
          this.detailtotal = res.data.total
          this.detailDataGrid = res.data.records
          this.listDetailLoading = false
        })
      },
      // 获取用户列表
      getpropertyAssess(flag) {
      	if(flag){
					this.page = 1;
				}
        const para = {
          params: {
            page: this.page,
            limit: this.pageSize,
            realname: this.filters.realname,
            community_name:this.filters.community_name
          }
        }
        this.listLoading = true
        this.$http.get(this.url.list, para).then((res) => {
          this.total = res.data.total
          var datas = res.data.records
          this.propertyAssess = datas
          this.listLoading = false
        })
      },
      // 显示详情页面
      getDetail: function () {
        this.getDetailVisible = true
      },
      selsChange: function (sels) {
        this.sels = sels
      }
    },
    mounted() {
      this.getpropertyAssess()
    }
  }

</script>





